<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${patient.id == null} ? '添加患者' : '编辑患者'">患者信息管理</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5', // 医疗蓝主色调
                        secondary: '#42A5F5', // 浅蓝辅助色
                        accent: '#0D47A1', // 深蓝强调色
                        neutral: '#F5F7FA', // 中性背景色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 页面标题区域 -->
    <div class="mb-8">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-2">
            <i class="fas fa-user-injured text-primary mr-3"></i>
            <span th:text="${patient.id == null} ? '添加患者' : '编辑患者'"></span>
        </h1>
        <p class="text-gray-600">管理患者基本信息，确保医疗记录准确无误</p>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-2xl card-shadow p-6 md:p-8">
        <form th:action="@{/admin/patient/save}" method="post" class="space-y-6">
            <input type="hidden" name="id" th:value="${patient.id}" />
            <input type="hidden" name="role" value="PATIENT">

            <!-- 基本信息分组 -->
            <div>
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <i class="fas fa-user text-primary mr-2"></i>基本信息
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-signature text-primary mr-1"></i>姓名 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" th:value="${patient.name}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入患者姓名" required>
                    </div>

                    <div>
                        <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-mars-venus text-primary mr-1"></i>性别 <span class="text-red-500">*</span>
                        </label>
                        <select name="gender" id="gender"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus appearance-none bg-white"
                                required>
                            <option value="男" th:selected="${patient.gender == '男'}">男</option>
                            <option value="女" th:selected="${patient.gender == '女'}">女</option>
                        </select>
                        <div class="absolute mt-10 ml-3 pointer-events-none text-gray-400">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>

                    <div>
                        <label for="age" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-birthday-cake text-primary mr-1"></i>年龄 <span class="text-red-500">*</span>
                        </label>
                        <input type="number" name="age" id="age" th:value="${patient.age}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入年龄" required>
                    </div>

                    <div>
                        <label for="birth_date" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-calendar-alt text-primary mr-1"></i>出生日期 <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="birth_date" id="birth_date"
                               th:value="${#dates.format(patient.birth_date, 'yyyy-MM-dd')}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               required>
                    </div>
                </div>
            </div>

            <!-- 联系信息分组 -->
            <div>
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <i class="fas fa-phone-alt text-primary mr-2"></i>联系信息
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-mobile-alt text-primary mr-1"></i>联系电话 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="phone" id="phone" th:value="${patient.phone}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入联系电话" required>
                    </div>

                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-map-marker-alt text-primary mr-1"></i>地址 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="address" id="address" th:value="${patient.address}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入详细地址" required>
                    </div>

                    <div>
                        <label for="id_card" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-id-card text-primary mr-1"></i>身份证号 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="id_card" id="id_card" th:value="${patient.id_card}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入身份证号" required>
                    </div>
                </div>
            </div>

            <!-- 账号信息分组 -->
            <div>
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <i class="fas fa-user-lock text-primary mr-2"></i>账号信息
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="account" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-envelope text-primary mr-1"></i>账户号 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="account" id="account" th:value="${patient.account}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请设置登录账号" required>
                    </div>

                    <div>
                        <label for="pwd" class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-lock text-primary mr-1"></i>密码 <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="pwd" id="pwd" th:value="${patient.pwd}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                               placeholder="请设置登录密码" required>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex flex-col sm:flex-row justify-end gap-4 pt-4 border-t border-gray-100">
                <a href="/admin/patient/list" class="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors duration-200 flex items-center justify-center">
                    <i class="fas fa-times mr-2"></i>取消
                </a>
                <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-accent transition-colors duration-200 flex items-center justify-center">
                    <i class="fas fa-save mr-2"></i>保存信息
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 页面脚本 -->
<script>
    // 表单交互增强
    document.addEventListener('DOMContentLoaded', function() {
        // 密码显示/隐藏功能
        const pwdInput = document.getElementById('pwd');
        if (pwdInput) {
            const togglePwdBtn = document.createElement('button');
            togglePwdBtn.className = 'absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none';
            togglePwdBtn.innerHTML = '<i class="fas fa-eye-slash"></i>';
            togglePwdBtn.onclick = function() {
                const type = pwdInput.type === 'password' ? 'text' : 'password';
                pwdInput.type = type;
                this.innerHTML = type === 'password' ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
            };

            const pwdContainer = pwdInput.parentElement;
            pwdContainer.style.position = 'relative';
            pwdContainer.appendChild(togglePwdBtn);
        }

        // 添加表单字段验证提示
        const requiredFields = document.querySelectorAll('input[required], select[required]');
        requiredFields.forEach(field => {
            field.addEventListener('invalid', function(e) {
                e.preventDefault();
                if (!this.validity.valid) {
                    this.classList.add('border-red-500');
                    this.classList.add('focus:ring-red-500');
                    this.classList.add('focus:border-red-500');

                    // 添加自定义错误提示
                    const errorMsg = this.nextElementSibling;
                    if (!errorMsg || !errorMsg.classList.contains('error-message')) {
                        const msg = document.createElement('div');
                        msg.className = 'error-message text-red-500 text-sm mt-1';
                        msg.textContent = this.dataset.error || '此字段为必填项';
                        this.parentNode.insertBefore(msg, this.nextSibling);
                    }
                }
            });

            field.addEventListener('input', function() {
                if (this.checkValidity()) {
                    this.classList.remove('border-red-500');
                    this.classList.remove('focus:ring-red-500');
                    this.classList.remove('focus:border-red-500');

                    const errorMsg = this.nextElementSibling;
                    if (errorMsg && errorMsg.classList.contains('error-message')) {
                        errorMsg.remove();
                    }
                }
            });
        });
    });
</script>
</body>
</html>